<template>
     <Card :dis-hover="true">
        <p slot="title">中期检查报告</p>
        <Tabs type="card" v-model="tab.value">
            <Button v-if="tab.value !== '2'" v-show="!tpl"  slot="extra"  type="primary" ghost @click="next">下一页</Button>
            <Button v-else slot="extra" v-show="!tpl"  type="primary" ghost @click="submit">提交</Button>
 
            <TabPane name="0"  ref="pane0"  label="项目进展情况">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">项目进展情况</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>项目进展情况</label>
                                <md-textarea v-model="article.Situation" :md-counter="3200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                    
                 </div>
            </TabPane>

            <TabPane name="1"  ref="pane1"  label="实施过程中存在的问题以及需要说明的情况">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">实施过程中存在的问题以及需要说明的情况</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>实施过程中存在的问题以及需要说明的情况</label>
                                <md-textarea v-model="article.Problems" :md-counter="3200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                    
                 </div>
            </TabPane>
            
            <TabPane name="2"  ref="pane2"  label="下阶段工作计划">
                 <div class="tab_content">
                    <md-card class="">
                    <md-card-header>
                    <div class="md-title">下阶段工作计划</div>
                    </md-card-header>
                    <md-card-content>
                            <md-field >
                                <!-- <label for="content">项目计划书正文</label>
                                <md-textarea name="content" v-model="article.Content"  md-counter="3200" md-autogrow></md-textarea> -->
                                 <label>重点说明项目的进度安排和解决存在问题的方案</label>
                                <md-textarea v-model="article.Plan" :md-counter="3200"></md-textarea>
                            </md-field>
                            
                    </md-card-content>
                    </md-card>
                    
                 </div>
            </TabPane>
        </Tabs>
    </Card>
</template>
<script>
import { newApiParams, GUID } from '@/common/utils';
import { SERVER_CPT_URL } from '@/api/config';
// import { MdField } from 'vue-material/dist/components';
import { mapState } from 'vuex';
export default {
  name: 'Chuangxin',
  //   components: {
  //     'md-field': MdField
  //   },
  data () {
    return {
      tab: {
        extraLabel: '下一页',
        value: '0'
      },
      article: {
          
        Situation: '',
        Problems: '',
        Plan: '', 
        ImsProject: {
          Id: this.$route.params.projectId
        }
      }
    };
  },
  computed: {
    user () {
      return this.$store.state.app.userInfo;
    },
    actionUrl () {
      return SERVER_CPT_URL + '/upload/fileupload';
    },
    uploadData () {
      return {
        Authorization: localStorage.getItem('token')
      };
    },
    addmode () {
      return !!this.$route.params.addMode;
    },
    editable () {
      return !!this.$route.params.editable;
    },
    projectId () {
      return this.$route.params.projectId;
    },
    showmode () {
      return !!this.$route.params.show;
    }
  },
  props: {
    tpl: {
      type: Boolean,
      default: () => false
    },
    ath: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    next () {
      switch (this.tab.value) {
      case '0':
        if (this.article.Situation) {
        //   console.log('下一步');
          this.tab.value = '1';
        //   this.$refs['pane1'].click();
        } else {
          this.$Message.warning('请补充信息');
        }
        break;
      case '1':
        if (!this.article.Problems) {
          this.$Message.warning('请补充项目成员信息！');
        //   this.tab.value = '1';
        } else {
          this.tab.value = '2'; 
        }
        break;
      }
    },
    submit () {
      if (this.article.Situation && this.article.Problems && this.article.Plan) {
        this.$Modal.confirm({
          title: '操作确认',
          content: '<p>确认后不能修改，请仔细检查，是否确认提交？</p>',
          onOk: () => {     
            console.log(this.projectId);
            this.$Message.success('success!');
            this.$api.SubmitImsProjectMediumTerm(this.article).then(res => {
              console.log(res);
              this.$reuter.push({
                name: '项目管理'
              });
            }, err => {
              if (err) {
                this.$Message.error(err);
              }
            });
          },
          onCancel: () => {
            this.$Message.info('Clicked cancel');
          }
        });
      } else {
        this.$Message.warning('请补充信息！');
      }
    }
  },
  mounted () {
    if (this.tpl) {
      this.article = this.ath;
    }
    if (this.showmode) {
      // this.article;
    }
    // this.initTutors();
  }
};
</script>
<style scoped>
input {
    max-width: 100%;
    border-radius: 0;
    font: inherit;
    background-color: transparent;
    border-style: none;
    flex: 1 1 auto;
    line-height: 20px;
    padding: 8px 0 8px;
    max-width: 100%;
    min-width: 0px;
    width: 100%;
}
input:active {
    border-style: none;
}
.tab_content {
    margin: 5px;
    line-height: 1.5em;
}
.input-lable {
    vertical-align: middle;
}
.md-textarea {
    min-height: 600px !important;
}
</style>

